let button = document.querySelector(".container button");
let name = document.querySelector(".container .name .nameText");
let name2 = document.querySelector(".container .name");
let button2 = document.querySelector(".theButton");
let button3 = document.querySelector(".upload button");
let button4 = document.querySelector(".nameListHeader2 i");
let file = document.querySelector("#file");
let drawerContainer = document.querySelector(".drawerContainer");
let drawer = document.querySelector(".drawerContainer .drawer");
let fileNameDiv = document.querySelector(".upload div");
let addSpan = document.querySelector(".nameList ul span");
let ul = document.querySelector(".nameList ul");
let nameArray = ["何骏扬", "何友志", "陈独秀", "李大钊", "王牛牛", "陈毅", "喜之郎", "大核桃", "卫生纸", "桃子", "大砍刀", "陈在湘"]
let fileName = ''
async function getNameList() {
  // 获取响应对象
  let response = await fetch('http://127.0.0.1:8080/getNameList')
  // 从响应对象中将其 JSON 内容解析出来, 变成了服务器发送的内容了
  nameArray = await response.json()
  renderNameArray()
}

getNameList()
let isStop = true
button.addEventListener('click', () => {
  if (isStop) {
    isStop = false
    button.innerHTML = "停止点名"
    name2.classList.add("active")
    let num = 0;
    let interval = setInterval(() => {
      num++;
      if (num > 50) {
        clearInterval(interval)
        isStop = true
        button.innerHTML = "开始点名"
        name2.classList.remove("active")
      }
      let theName = nameArray[Math.floor(Math.random() * nameArray.length)]
      name.innerHTML = theName
    }, 50)
  }
})

button2.addEventListener('click', () => {
  if (drawerContainer.classList.contains('active')) {
    drawer.style.animation = 'outer .3s forwards'
    button2.style.right = '0'
    button2.style.backgroundColor = 'linear-gradient(135deg, #cdc4dc 0%, #a472a3 50%, #f1e297 100%)'
    drawerContainer.style.backgroundColor = 'transparent'
    setTimeout(() => {
      drawerContainer.classList.remove('active')
    },300)
  }else {
    drawerContainer.style.backgroundColor = 'rgba(0,0,0,0.5)'
    button2.style.right = '30%'
    drawer.style.animation = 'inter .3s forwards'
    drawerContainer.classList.add('active')
  }
})


button3.addEventListener('click',() => {
  file.click();
})
file.addEventListener('change',(e) => {
  let theFile = e.target.files[0]
  if (theFile.name.endsWith('xlsx') || theFile.name.endsWith('xls')) {
    fileName = theFile.name
    fileNameDiv.style.display = 'flex'
    fileNameDiv.querySelector("span").innerHTML = fileName
    const formData = new FormData()
    formData.append('file', theFile)
    // 发送 ajax 请求
    fetch("http://localhost:8080/getNameListByFile",{
      method: "POST",
      body: formData
    }).then((response) => {
      response.json().then((data) => {
        console.log(data)
        nameArray = data
        renderNameArray()
      })

    })
  }else {
    alert("文件格式不符合, 请重试!")
    delete e.target.files[0]
  }
})

button4.addEventListener('click',() => {
  if (document.querySelector('.nameList').classList.contains('active')) {
    document.querySelector('.nameList').classList.remove('active')
    button4.className = 'fa fa-sort-desc'
  }else {
    document.querySelector('.nameList').classList.add('active')
    button4.className = 'fa fa-sort-asc'
  }
})

document.querySelector('.nameList').addEventListener('click',(e) => {
  if (e.target.localName == 'li') {
    // 删除这个元素
    console.dir(e.target)
    let index = +e.target.getAttribute("data-index")
    nameArray.splice(index,1)
    // TODO 重新渲染
    renderNameArray()
  }
})
function showInput(e) {
  console.log(e)
  let input = document.createElement('input');
  e.target.style.width = '100px'
  input.style.width = '100px'
  input.addEventListener('keydown', (e) => {
    console.log(e)
    if (e.code === 'Enter') {
      nameArray.push(input.value)
      e.target.innerHTML = '+'
      e.target.style.width = 'auto'
      renderNameArray()
    }
  })
  e.target.innerHTML = ''
  e.target.appendChild(input)
  input.focus()
}

function renderNameArray() {
  let s = ''
  for (let i = 0; i < nameArray.length; i++) {
    s += `<li data-index="${i}">${nameArray[i]}</li>`
  }
  s += `<span onclick="showInput(event)">+</span>`
  ul.innerHTML = s
}
